import React,{useState,useEffect,useContext,useRef} from 'react';
import {Table,Button,Modal,Form,Input} from 'antd'
import axios from '_axios@0.27.2@axios';
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';


const Newscategory = (props) => {
  const [dataSource, setdataSource] = useState([])


  // 获取列表数据
  useEffect(() => {
    axios.get(`/categories`).then(res => {
      setdataSource(res.data)
    })
  }, [])

      // 删除提示
  const confirmMethod = (item) => {
    Modal.confirm({
    title: '删除',
    icon: <ExclamationCircleOutlined />,
    content: '你确认删除吗？',
    okText: '确认',
    cancelText: '取消',
      onOk() {
        deleteMethod(item)
      }
    })
  }
    // 删除
  const deleteMethod = (item) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`/categories/${item.id}`)
 
  }

  // 表格头部数据
    const columns = [
     {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '栏目名称',
      dataIndex: 'title',
      onCell: (record) => ({
          record,
          editable: true,
          dataIndex: "title",
          title: "栏目名称",
          handleSave: handleSave,
        }),
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Button
            danger
            shape="circle"
            icon={<DeleteOutlined />}
            onClick={() => confirmMethod(item)}
           />
       </div>
      }
    }
  ]

  // 失去焦点触发 
  const handleSave = (record) => {
    console.log(record)
    setdataSource(dataSource.map(item => {
      if (item.id === record.id) {
        return {
          id: item.id,
          title: record.title,
          value: record.title
        }
      }
      return item
    }))
    axios.patch(`/categories/${record.id}`, {
      title: record.title,
      value: record.title
    }).then(res => {})
  }

  const EditableContext = React.createContext(null);
  const EditableRow = ({ index, ...props }) => {
        const [form] = Form.useForm();
        return (
            <Form form={form} component={false}>
                <EditableContext.Provider value={form}>
                    <tr {...props} />
                </EditableContext.Provider>
            </Form>
        )
    }

  const EditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
  }) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(EditableContext);
    useEffect(() => {
      if (editing) {
        inputRef.current.focus();
      }
    }, [editing]);

    const toggleEdit = () => {
      setEditing(!editing);
      form.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    };

    const save = async () => {
      try {
        const values = await form.validateFields();
        toggleEdit();
        handleSave({ ...record, ...values });
      } catch (errInfo) {
        console.log('Save failed:', errInfo);
      }
    };

    let childNode = children;

    if (editable) {
      childNode = editing ? (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          rules={[
            {
              required: true,
              message: `${title} is required.`,
            },
          ]}
        >
          <Input ref={inputRef} onPressEnter={save} onBlur={save} />
        </Form.Item>
      ) : (
        <div
          className="editable-cell-value-wrap"
          style={{
            paddingRight: 24,
          }}
          onClick={toggleEdit}
        >
          {children}
        </div>
      );
    }

    return <td {...restProps}>{childNode}</td>;
  }


  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5
        }}
        components={{
           body: {
            row: EditableRow,
            cell: EditableCell,
          }
        }}
        rowKey={(item)=>item.id}
      ></Table>
    </div>
  );
}

export default Newscategory;
